<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>user-edit</title>
    <link rel="stylesheet" href="/static/layui/css/layui.css">
    <script src="/static/layui/layui.js"></script>
    <script src="/static/JQuery/jquery-3.3.1.min.js"></script>
    <style>
        body {
            margin: 10px;
        }
    </style>
</head>

<body>
    <div class="layui-layout layui-layout-admin">
        <div class="layui-body">
            <blockquote class="layui-elem-quote">
                温馨提示：如果最左侧的导航的高度超出了你的屏幕，你可以将鼠标移入导航区域，然后滑动鼠标滚轮即可
            </blockquote>

            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
                <legend>个人信息维护</legend>
            </fieldset>

            <form class="layui-form" lay-filter="userInfo">
                <input name="userid" type="hidden">
                <input name="password" type="hidden">
                <input name="fkroleid" type="hidden">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">用户名</label>
                        <div class="layui-input-inline">
                            <input name="username" lay-verify="required" placeholder="请输入用户名" class="layui-input" type="text">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">真实姓名</label>
                        <div class="layui-input-inline">
                            <input name="realname" lay-verify="required" placeholder="请输入真实姓名" class="layui-input" type="text">
                        </div>
                    </div>
                </div>

                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">年龄</label>
                        <div class="layui-input-inline">
                            <input name="age" lay-verify="required|number" class="layui-input" type="text">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">性别</label>
                        <div class="layui-input-inline">
                            <input name="sex" lay-verify="required" class="layui-input" type="text">
                        </div>
                    </div>
                </div>


                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">联系方式</label>
                        <div class="layui-input-inline">
                            <input name="phone" lay-verify="required|phone" class="layui-input" type="tel">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">电子邮箱</label>
                        <div class="layui-input-inline">
                            <input name="email" lay-verify="email" class="layui-input" type="text">
                        </div>
                    </div>
                </div>

                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn layui-btn-normal" lay-submit lay-filter="go">立即提交</button>
                        <button type="reset" class="layui-btn layui-btn-normal">重置</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</body>
</html>

<script>

    layui.use(['form', 'layedit', 'laydate'], function(){
        var form = layui.form
            ,layer = layui.layer
            ,laydate = layui.laydate;

        //获取当前用户数据
        $.ajax({
            type : "GET",
            url : "/system/getLoginUserInfo",
            async: false,
            success : function (result) {
                //表单input初始赋值
                form.val('userInfo', result);
            },
            error : function (result) {
                parent.layer.msg("数据交互错误！");
            }
        });

        //自定义验证规则
        form.verify({
            title: function(value){
                if(value.length < 5){
                    return '标题至少得5个字符啊';
                }
            }
            ,pass: [/(.+){6,12}$/, '密码必须6到12位']

        });

        //监听提交
        //不执数据发送接收均为json，请求发送成功，但不执行success也不执行error
        form.on('submit(go)', function(data){
            //alert(JSON.stringify(data));
            $.ajax({
                url : "/system/changeUserInfo",
                type:"POST",
                data:JSON.stringify(data.field),
                contentType: "application/json;charset=utf-8",
                dataType : "json",
                async: false,
                success : function (result) {
                    //表单input初始赋值
                    if(result.code == 0){
                        layer.msg(result.msg, {icon : 1});
                        form.val('userInfo', result.data);
                    }else{
                        layer.msg(result.msg, {icon : 5});
                    }
                },
                error : function (result) {
                    layer.msg(result.msg, {icon : 5});
                }
            });
            return false;
        });
    });
</script>